<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="page-container">
    <view class="nav-bar h-10 flex items-center px-3 shadow-sm">
      <wd-icon name="arrow-left" size="22px" @click="goBack"></wd-icon>
      <span class="ml-3 text-base font-medium">缴费提醒详情</span>
    </view>

    <view class="content px-3 pt-13 pb-3">
      <view class="bg-white rounded-lg p-2 mb-3">
        <view class="text-base font-medium mb-3">基本信息</view>
        <view class="flex justify-between items-start">
          <view>
            <view class="text-sm flex">
              <text class="text-[#6e6e6e] w-20 shrink-0">房间编号：</text>
              <text>{{ fees.roomName }}</text>
            </view>
            <view class="mt-1 text-sm flex">
              <text class="text-[#6e6e6e] w-20 shrink-0">业主姓名：</text>
              <view>{{ fees.customerName }}</view>
            </view>
            <view class="mt-1 text-sm flex">
              <text class="text-[#6e6e6e] w-20 shrink-0">欠费类型：</text>
              <text>{{ fees.arrearsFeeTypeName }}</text>
            </view>
          </view>
          <view class="text-right">
            <view class="text-base font-medium">
              合计:
              <wd-text :text="fees.fee" mode="price" type="primary" prefix="￥" />
              元
            </view>
            <wd-tag type="warning" mark>本年已催 {{ fees.noticeCount }} 次</wd-tag>
          </view>
        </view>

        <view class="mt-1 text-sm flex">
          <text class="text-[#6e6e6e] w-20 shrink-0">费用期间：</text>
          <text>{{ fees.startTime }} 至 {{ fees.endTime }}</text>
        </view>
        <view class="mt-1 text-sm flex">
          <text class="text-[#6e6e6e] w-20 shrink-0">费用类型：</text>
          <text>{{ fees.feeTypeName }}</text>
        </view>
        <view class="flex items-center mt-1 text-sm">
          <text class="text-[#6e6e6e] w-20 shrink-0">账单详情：</text>

          <a href="#" class="text-#4477ee">查看</a>
        </view>
      </view>

      <view class="bg-white rounded-lg p-2 mb-3">
        <view class="flex justify-between items-center mb-3">
          <view class="text-base font-medium">推荐依据</view>
          <view class="text-xs text-gray-400">该分析由AI智能生成</view>
        </view>
        <view class="space-y-4">
          <view class="flex items-start">
            <wd-icon name="check-outline" class="mr-2" color="#67C23A" size="22px"></wd-icon>
            <view>
              <view class="font-medium mb-2">缴费习惯分析：</view>
              <view class="mt-3 flex flex-wrap gap-2" v-if="fees.paymentHabits">
                <wd-tag
                  type="primary"
                  custom-class="icon-tag"
                  v-for="item in fees.paymentHabits.split(' ')"
                  :key="item"
                >
                  {{ item }}
                </wd-tag>
              </view>
            </view>
          </view>
          <view class="flex items-start">
            <wd-icon name="check-outline" class="mr-2" color="#67C23A" size="22px"></wd-icon>

            <view>
              <view class="font-medium mb-2">积极因素分析：</view>
              <view class="mt-3 flex flex-wrap gap-2" v-if="fees.positiveFactors">
                <wd-tag
                  type="success"
                  custom-class="icon-tag"
                  v-for="item in fees.positiveFactors.split(' ')"
                  :key="item"
                >
                  {{ item }}
                </wd-tag>
              </view>
            </view>
          </view>
          <view class="flex items-start">
            <wd-icon name="check-outline" class="mr-2" color="#67C23A" size="22px"></wd-icon>

            <view>
              <view class="font-medium mb-2">沟通情况分析：</view>
              <view class="mt-3 flex flex-wrap gap-2">
                <view class="mt-3 flex flex-wrap gap-2" v-if="fees.communicationSituation">
                  <wd-tag
                    type="success"
                    custom-class="icon-tag"
                    v-for="item in fees.communicationSituation.split(' ')"
                    :key="item"
                  >
                    {{ item }}
                  </wd-tag>
                </view>
              </view>
            </view>
          </view>
          <view class="flex items-start">
            <wd-icon name="check-outline" class="mr-2" color="#67C23A" size="22px"></wd-icon>
            <view>
              <view class="font-medium mb-2">负面因素分析：</view>
              <view class="mt-3 flex flex-wrap gap-2" v-if="fees.negativeFactors">
                <wd-tag
                  custom-class="icon-tag"
                  v-for="item in fees.negativeFactors.split(' ')"
                  :key="item"
                >
                  {{ item }}
                </wd-tag>
              </view>
            </view>
          </view>
          <view class="flex items-start">
            <wd-icon name="check-outline" class="mr-2" color="#67C23A" size="22px"></wd-icon>
            <view>
              <view class="font-medium mb-2">生成结论：</view>
              <view class="px-3 py-1 bg-#67C23A text-white rounded text-sm">
                {{ fees.conclusion }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="bg-white rounded-lg p-2">
        <view class="flex justify-between items-center mb-3">
          <view class="text-base font-medium">个性化话术</view>
          <view class="text-xs text-gray-400">该话术由AI根据客户信息智能生成</view>
        </view>
        <view class="space-y-4">
          <view class="flex items-start">
            <wd-icon name="check-outline" class="mr-2" color="#67C23A" size="22px"></wd-icon>

            <view>
              <view class="font-medium mb-2">画像分析：</view>
              <view class="mt-3 flex flex-wrap gap-2" v-if="fees.portrait">
                <wd-tag
                  type="success"
                  custom-class="icon-tag"
                  v-for="item in fees.portrait.split(' ')"
                  :key="item"
                >
                  {{ item }}
                </wd-tag>
              </view>
            </view>
          </view>
          <view class="flex items-start">
            <wd-icon name="check-outline" class="mr-2" color="#67C23A" size="22px"></wd-icon>

            <view>
              <view class="font-medium mb-2">会话分析：</view>
              <view class="flex flex-wrap gap-2" v-if="fees.chat">
                <wd-tag
                  type="warning"
                  custom-class="icon-tag"
                  v-for="item in fees.chat.split(' ')"
                  :key="item"
                >
                  {{ item }}
                </wd-tag>
              </view>
            </view>
          </view>
          <view class="flex items-start">
            <wd-icon name="check-outline" class="mr-2" color="#67C23A" size="22px"></wd-icon>

            <view>
              <view class="font-medium mb-2">其他分析：</view>
              <view class="flex flex-wrap gap-2" v-if="fees.otherAnalysis">
                <wd-tag
                  type="primary"
                  custom-class="icon-tag"
                  v-for="item in fees.otherAnalysis.split(' ')"
                  :key="item"
                >
                  {{ item }}
                </wd-tag>
              </view>
            </view>
          </view>
          <view class="flex items-start">
            <wd-icon name="check-outline" class="mr-2" color="#67C23A" size="22px"></wd-icon>

            <view>
              <view class="font-medium mb-2">生成话术：</view>
              <view class="bg-gray-50 p-3 rounded-lg text-sm">
                {{ recommendContent }}
              </view>
              <view class="text-right">
                <wd-button @click="show = true" plain class="mt-3" :round="false" size="small">
                  修改话术
                </wd-button>
              </view>
              <!-- <button
                style="border: 1rpx solid #4477ee"
                class="inline-block mt-3 px-3 py-1 border bg-white text-#4477ee rounded-b text-sm"
              >
                修改话术
              </button> -->
            </view>
          </view>
        </view>
      </view>
    </view>
    <wd-popup
      v-model="show"
      position="bottom"
      lock-scroll
      :close-on-click-modal="false"
      closable
      :safe-area-inset-bottom="true"
      custom-style="height: 500px;"
      @close="handleClose"
    >
      <view class="p-[12px] bg-gray-100 h-[500px]">
        <view class="font-medium mb-2">修改话术：</view>
        <wd-textarea
          class="mt-3"
          v-model="recommendContent"
          :maxlength="225"
          clearable
          show-word-limit
          size="large"
          placeholder="请输入..."
          custom-textarea-class="textarea-content"
        />
      </view>
    </wd-popup>
    <view class="fixed bottom-0 left-0 w-full bg-white py-3">
      <button
        @click="handleShareAppMessage"
        class="bg-#4477ee text-white w-[80%] m-auto rounded-b font-medium"
      >
        发送提醒
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
//
import { getFees, IFees } from './api'
import { useToast } from 'wot-design-uni'
import * as ww from '@wecom/jssdk'
import { registerWeChat } from '@/utils/wecom'

registerWeChat()

const toast = useToast()

const show = ref(false)
const recommendContent = ref('')
const fees = ref<IFees>({})

onLoad((params) => {
  console.log('onLoad', params.id)
  getFees(params.id).then((res) => {
    console.log(res)
    fees.value = res.data
    recommendContent.value = (res.data as { generateAnswer: string })?.generateAnswer
  })
})
function handleRemind() {
  toast.loading('加载中...')
  setTimeout(() => {
    toast.success('提醒成功')
  }, 1000)
}
function handleClose() {
  show.value = false
}
const handleShareAppMessage = () => {
  // 企微
  ww.shareAppMessage({
    title: '小鑫管家拍拍您，有个账单请查收',
    desc: recommendContent.value,
    link: 'https://wxaurl.cn/BLIYoUKz7Kj',
    imgUrl: 'https://res.mail.qq.com/node/ww/wwmng/style/images/index_share_logo$13c64306.png',
  })
}
function goBack() {
  uni.navigateBack({
    delta: 1,
  })
}
</script>

<style lang="scss" scoped>
//
.page-container {
  padding-bottom: 70px;
  background-color: #f5f7fa;
}
.nav-bar {
  position: fixed;
  top: 0;
  z-index: 50;
  width: 100%;
  background: white;
}
.content {
  // padding: 32rpx;
  // padding-top: 115rpx;
  // margin-bottom: 150rpx;
}
:deep(.icon-tag) {
  padding: 4rpx 16rpx;
  font-size: 0.8rem;
  line-height: 1.25rem;
  border-radius: 8rpx;
}
:deep(.textarea-content) {
  height: 500rpx;
}
</style>
